<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>约会灵感 - 社交平台</title>
    
    <!-- 引入外部资源 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <style>
        :root {
            --primary: #EC4899;
            --primary-light: #F472B6;
            --secondary: #3B82F6;
            --accent: #F59E0B;
            --dark: #1F2937;
            --light: #F9FAFB;
            --gray: #6B7280;
            --light-gray: #E5E7EB;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
            --shadow: 0 4px 16px rgba(0,0,0,0.12);
            --transition: all 0.3s ease;
            --radius: 12px;
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #FFF5F7;
            color: var(--dark);
            line-height: 1.6;
            padding-bottom: 3rem;
        }
        
        .container {
            max-width: 1200px;
        }
        
        /* 页面标题样式 */
        .page-header {
            padding: 2.5rem 0;
            margin-bottom: 2rem;
            background: linear-gradient(135deg, #FFF0F3 0%, #fff 100%);
            border-radius: 0 0 30px 30px;
        }
        
        .page-title {
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 0.75rem;
            position: relative;
            display: inline-block;
        }
        
        .page-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 60px;
            height: 3px;
            background-color: var(--primary-light);
            border-radius: 2px;
        }
        
        .page-subtitle {
            font-size: 1rem;
            color: var(--dark);
            max-width: 800px;
            opacity: 0.8;
        }
        
        /* 分类标签样式 */
        .category-tabs {
            display: flex;
            overflow-x: auto;
            padding-bottom: 0.5rem;
            margin-bottom: 2rem;
            gap: 10px;
            scrollbar-width: thin;
        }
        
        .category-tabs::-webkit-scrollbar {
            height: 4px;
        }
        
        .category-tabs::-webkit-scrollbar-thumb {
            background-color: var(--primary-light);
            border-radius: 2px;
        }
        
        .category-item {
            white-space: nowrap;
            background-color: white;
            border: 1px solid var(--light-gray);
            border-radius: 20px;
            padding: 6px 18px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: var(--transition);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .category-item:hover, .category-item.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 约会列表容器 - 多种布局支持 */
        .date-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 3rem;
        }
        
        /* 大图布局 - 全宽 */
        .featured-date {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            background-color: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
        }
        
        .featured-date:hover {
            box-shadow: var(--shadow);
        }
        
        .featured-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .featured-content {
            padding: 2rem;
            display: flex;
            flex-direction: column;
        }
        
        /* 双列布局 - 并排显示 */
        .double-column {
            grid-column: span 2;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }
        
        /* 卡片基础样式 */
        .date-card {
            background-color: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .date-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
        }
        
        /* 标签样式 */
        .date-tag {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: var(--primary);
            color: white;
            border-radius: 4px;
            padding: 2px 8px;
            font-size: 0.7rem;
            font-weight: 600;
            z-index: 1;
        }
        
        .price-indicator {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: var(--accent);
            color: white;
            border-radius: 4px;
            padding: 3px 8px;
            font-size: 0.8rem;
            font-weight: 600;
            z-index: 1;
        }
        
        /* 图片容器样式 */
        .image-container {
            position: relative;
            overflow: hidden;
        }
        
        .card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .date-card:hover .card-image {
            transform: scale(1.05);
        }
        
        /* 多图布局 */
        .multi-images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4px;
            height: 100%;
        }
        
        .multi-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .multi-images.count-1 {
            grid-template-columns: 1fr;
        }
        
        .multi-images.count-3 {
            grid-template-rows: repeat(2, 1fr);
        }
        
        .multi-images.count-3 .multi-image:first-child {
            grid-column: span 2;
        }
        
        .multi-images.count-4 {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
        }
        
        /* 图片数量指示器 */
        .image-count {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0,0,0,0.6);
            color: white;
            border-radius: 4px;
            padding: 2px 6px;
            font-size: 0.75rem;
        }
        
        /* 内容样式 */
        .card-body {
            padding: 1rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .date-category {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            background-color: rgba(236, 72, 153, 0.1);
            color: var(--primary);
        }
        
        .date-title {
            font-size: 1.15rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--dark);
            transition: var(--transition);
            line-height: 1.4;
        }
        
        .date-card:hover .date-title {
            color: var(--primary);
        }
        
        .date-description {
            color: var(--gray);
            font-size: 0.85rem;
            margin-bottom: 1rem;
            line-height: 1.5;
            flex-grow: 1;
        }
        
        .date-meta {
            font-size: 0.8rem;
            color: var(--gray);
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 作者信息 */
        .author-info {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 0.75rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px dashed var(--light-gray);
        }
        
        .author-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(236, 72, 153, 0.2);
        }
        
        .author-name {
            font-weight: 500;
            font-size: 0.85rem;
        }
        
        .post-date {
            font-size: 0.75rem;
            color: var(--gray);
        }
        
        /* 互动统计 */
        .date-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .stat-item:hover {
            color: var(--primary);
        }
        
        .stat-item.liked {
            color: var(--primary);
        }
        
        .stat-item.saved {
            color: var(--secondary);
        }
        
        /* 无图约会样式 */
        .no-image-card {
            border: 1px solid var(--light-gray);
        }
        
        .no-image-body {
            padding: 1.25rem;
        }
        
        .no-image-header {
            background-color: rgba(236, 72, 153, 0.05);
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--light-gray);
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .featured-date {
                grid-template-columns: 1fr;
            }
            
            .double-column {
                grid-column: span 1;
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .date-container {
                grid-template-columns: 1fr;
            }
            
            .page-title {
                font-size: 1.8rem;
            }
            
            .featured-content {
                padding: 1.5rem;
            }
        }
        
        /* 加载更多按钮 */
        .load-more {
            display: block;
            margin: 2rem auto;
            background-color: white;
            border: 1px solid var(--primary);
            color: var(--primary);
            padding: 8px 24px;
            border-radius: 20px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .load-more:hover {
            background-color: var(--primary);
            color: white;
        }
        
        /* 快速操作按钮 */
        .quick-actions {
            display: flex;
            gap: 8px;
            margin-top: 1rem;
        }
        
        .action-btn {
            flex: 1;
            padding: 6px 0;
            border-radius: 6px;
            font-size: 0.85rem;
            font-weight: 500;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }
        
        .primary-action {
            background-color: var(--primary);
            color: white;
        }
        
        .primary-action:hover {
            background-color: #db2777;
        }
        
        .secondary-action {
            background-color: rgba(236, 72, 153, 0.1);
            color: var(--primary);
        }
        
        .secondary-action:hover {
            background-color: rgba(236, 72, 153, 0.2);
        }
    </style>
</head>
<body>
    <div class="container py-4 px-4">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">约会灵感</h1>
            <p class="page-subtitle">发现有趣的约会创意，分享你的浪漫时刻，结识志同道合的朋友</p>
            
            <!-- 约会分类标签 -->
            <div class="category-tabs">
                <div class="category-item active">
                    <i class="fas fa-heart"></i> 全部约会
                </div>
                <div class="category-item">
                    <i class="fas fa-utensils"></i> 美食约会
                </div>
                <div class="category-item">
                    <i class="fas fa-film"></i> 娱乐体验
                </div>
                <div class="category-item">
                    <i class="fas fa-tree"></i> 户外活动
                </div>
                <div class="category-item">
                    <i class="fas fa-palette"></i> 文化艺术
                </div>
                <div class="category-item">
                    <i class="fas fa-gamepad"></i> 趣味体验
                </div>
                <div class="category-item">
                    <i class="fas fa-glass-cheers"></i> 夜生活
                </div>
                <div class="category-item">
                    <i class="fas fa-star"></i> 热门推荐
                </div>
            </div>
        </div>
        
        <!-- 约会列表容器 -->
        <div class="date-container">
            <!-- 特色约会 - 大图全宽布局 -->
            <div class="featured-date">
                <div class="image-container">
                    <img src="https://picsum.photos/800/600?random=100" alt="星空露营约会" class="featured-image">
                    <div class="date-tag">热门推荐</div>
                    <div class="price-indicator">¥300/人</div>
                </div>
                <div class="featured-content">
                    <span class="date-category">户外活动</span>
                    <h3 class="date-title">浪漫星空露营约会，远离城市喧嚣</h3>
                    <p class="date-description">
                        在近郊的星空营地共度浪漫夜晚，白天可以一起徒步、野餐，晚上围着篝火聊天，观赏银河星空。营地提供双人帐篷和睡袋租赁，还有专业摄影师可以预约拍摄星空下的合影。建议穿舒适的户外服装，带一件外套晚上会有点凉。
                    </p>
                    
                    <div class="date-meta">
                        <div class="meta-item">
                            <i class="far fa-clock"></i> 全天
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-map-marker-alt"></i> 远郊星空营地
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-calendar-alt"></i> 周末
                        </div>
                    </div>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=110" alt="露营爱好者小星的头像" class="author-avatar">
                        <div>
                            <div class="author-name">露营爱好者小星</div>
                            <div class="post-date">分享于 5天前</div>
                        </div>
                    </div>
                    
                    <div class="quick-actions">
                        <button class="action-btn primary-action">
                            <i class="fas fa-calendar-plus"></i> 计划参加
                        </button>
                        <button class="action-btn secondary-action">
                            <i class="far fa-comment"></i> 讨论详情
                        </button>
                    </div>
                    
                    <div class="date-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>8.7k 浏览</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>342 评论</span>
                        </div>
                        <div class="stat-item liked">
                            <i class="fas fa-heart"></i>
                            <span>1.2k 点赞</span>
                        </div>
                        <div class="stat-item saved">
                            <i class="fas fa-bookmark"></i>
                            <span>567 收藏</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 双列布局 -->
            <div class="double-column">
                <!-- 双列左 - 单图 -->
                <div class="date-card">
                    <div class="image-container" style="height: 200px;">
                        <img src="https://picsum.photos/600/400?random=101" alt="手工陶艺体验" class="card-image">
                        <div class="date-tag">文化艺术</div>
                        <div class="price-indicator">¥180/人</div>
                    </div>
                    <div class="card-body">
                        <h3 class="date-title">一起做陶艺，创造专属回忆</h3>
                        <p class="date-description">
                            在温馨的陶艺工作室，一起学习制作简单的陶艺作品，可以互相为对方做一个小礼物。完成后可以选择烧制带走，非常有纪念意义。
                        </p>
                        
                        <div class="date-meta">
                            <div class="meta-item">
                                <i class="far fa-clock"></i> 2小时
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-map-marker-alt"></i> 艺术区
                            </div>
                        </div>
                        
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=111" alt="文艺青年小林的头像" class="author-avatar">
                            <div class="author-name">文艺青年小林</div>
                        </div>
                        
                        <div class="date-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i> 3.2k
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i> 124
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i> 567
                            </div>
                            <div class="stat-item">
                                <i class="far fa-bookmark"></i> 231
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 双列右 - 多图3张 -->
                <div class="date-card">
                    <div class="image-container" style="height: 200px;">
                        <div class="multi-images count-3">
                            <img src="https://picsum.photos/600/400?random=102" alt="私房菜约会图片1" class="multi-image">
                            <img src="https://picsum.photos/600/400?random=103" alt="私房菜约会图片2" class="multi-image">
                            <img src="https://picsum.photos/600/400?random=104" alt="私房菜约会图片3" class="multi-image">
                        </div>
                        <div class="image-count">3图</div>
                        <div class="date-tag">美食约会</div>
                        <div class="price-indicator">¥260/人</div>
                    </div>
                    <div class="card-body">
                        <h3 class="date-title">隐藏在老巷里的私房菜约会</h3>
                        <p class="date-description">
                            一家需要提前预约的私房菜馆，老板会根据季节和客人喜好定制菜单，环境私密安静，适合聊天。推荐尝试他们的招牌红烧肉和手工豆腐。
                        </p>
                        
                        <div class="date-meta">
                            <div class="meta-item">
                                <i class="far fa-clock"></i> 1.5小时
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-map-marker-alt"></i> 老城区
                            </div>
                        </div>
                        
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=112" alt="美食家阿杰的头像" class="author-avatar">
                            <div class="author-name">美食家阿杰</div>
                        </div>
                        
                        <div class="date-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i> 4.5k
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i> 210
                            </div>
                            <div class="stat-item liked">
                                <i class="fas fa-heart"></i> 876
                            </div>
                            <div class="stat-item">
                                <i class="far fa-bookmark"></i> 345
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 普通网格布局 - 无图 -->
            <div class="date-card no-image-card">
                <div class="no-image-header">
                    <div class="date-tag">趣味体验</div>
                    <div class="price-indicator">¥120/人</div>
                </div>
                <div class="card-body no-image-body">
                    <h3 class="date-title">城市定向越野，一起探索城市角落</h3>
                    <p class="date-description">
                        设计一条城市探索路线，包含历史建筑、特色小店和隐藏景点，完成任务打卡可以获得小奖励。既有趣又能锻炼身体，还能增进彼此了解。
                    </p>
                    
                    <div class="date-meta">
                        <div class="meta-item">
                            <i class="far fa-clock"></i> 3小时
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-map-marker-alt"></i> 市中心
                        </div>
                    </div>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=113" alt="城市探索者小路的头像" class="author-avatar">
                        <div class="author-name">城市探索者小路</div>
                    </div>
                    
                    <div class="date-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i> 2.1k
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i> 98
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i> 432
                        </div>
                        <div class="stat-item saved">
                            <i class="fas fa-bookmark"></i> 189
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 普通网格布局 - 多图4张 -->
            <div class="date-card">
                <div class="image-container" style="height: 180px;">
                    <div class="multi-images count-4">
                        <img src="https://picsum.photos/600/400?random=105" alt="主题乐园约会图片1" class="multi-image">
                        <img src="https://picsum.photos/600/400?random=106" alt="主题乐园约会图片2" class="multi-image">
                        <img src="https://picsum.photos/600/400?random=107" alt="主题乐园约会图片3" class="multi-image">
                        <img src="https://picsum.photos/600/400?random=108" alt="主题乐园约会图片4" class="multi-image">
                    </div>
                    <div class="image-count">4图</div>
                    <div class="date-tag">娱乐体验</div>
                    <div class="price-indicator">¥280/人</div>
                </div>
                <div class="card-body">
                    <h3 class="date-title">主题乐园一日游，找回童心</h3>
                    <p class="date-description">
                        一起去主题乐园，挑战过山车，玩各种游乐设施，晚上看烟花表演。建议工作日去，人比较少不用排队太久。
                    </p>
                    
                    <div class="date-meta">
                        <div class="meta-item">
                            <i class="far fa-clock"></i> 全天
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-map-marker-alt"></i> 郊区乐园
                        </div>
                    </div>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=114" alt="游乐达人小欣的头像" class="author-avatar">
                        <div class="author-name">游乐达人小欣</div>
                    </div>
                    
                    <div class="date-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i> 5.3k
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i> 276
                        </div>
                        <div class="stat-item liked">
                            <i class="fas fa-heart"></i> 987
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i> 456
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 普通网格布局 - 双图 -->
            <div class="date-card">
                <div class="image-container" style="height: 180px;">
                    <div class="multi-images count-2">
                        <img src="https://picsum.photos/600/400?random=109" alt="葡萄酒品鉴会图片1" class="multi-image">
                        <img src="https://picsum.photos/600/400?random=115" alt="葡萄酒品鉴会图片2" class="multi-image">
                    </div>
                    <div class="image-count">2图</div>
                    <div class="date-tag">夜生活</div>
                    <div class="price-indicator">¥350/人</div>
                </div>
                <div class="card-body">
                    <h3 class="date-title">葡萄酒品鉴会，浪漫微醺之夜</h3>
                    <p class="date-description">
                        参加小型葡萄酒品鉴会，有专业人士讲解葡萄酒知识，搭配芝士和小食。氛围优雅，适合轻松聊天，认识新朋友。
                    </p>
                    
                    <div class="date-meta">
                        <div class="meta-item">
                            <i class="far fa-clock"></i> 2小时
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-map-marker-alt"></i> 红酒馆
                        </div>
                    </div>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=116" alt="品酒师阿文的头像" class="author-avatar">
                        <div class="author-name">品酒师阿文</div>
                    </div>
                    
                    <div class="date-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i> 3.7k
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i> 156
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i> 654
                        </div>
                        <div class="stat-item saved">
                            <i class="fas fa-bookmark"></i> 298
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 普通网格布局 - 无图 -->
            <div class="date-card no-image-card">
                <div class="no-image-header">
                    <div class="date-tag">文化艺术</div>
                    <div class="price-indicator">免费/人</div>
                </div>
                <div class="card-body no-image-body">
                    <h3 class="date-title">美术馆夜游，安静欣赏艺术作品</h3>
                    <p class="date-description">
                        周五晚上的美术馆有特别展览，人少安静，可以慢慢欣赏艺术品，还能参加免费的讲解活动。结束后可以在附近的咖啡馆小坐聊天。
                    </p>
                    
                    <div class="date-meta">
                        <div class="meta-item">
                            <i class="far fa-clock"></i> 2.5小时
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-map-marker-alt"></i> 艺术中心
                        </div>
                    </div>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=117" alt="艺术爱好者小雅的头像" class="author-avatar">
                        <div class="author-name">艺术爱好者小雅</div>
                    </div>
                    
                    <div class="date-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i> 2.8k
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i> 132
                        </div>
                        <div class="stat-item liked">
                            <i class="fas fa-heart"></i> 543
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i> 210
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多按钮 -->
        <button class="load-more">
            <i class="fas fa-refresh"></i> 发现更多约会灵感
        </button>
    </div>

    <script>
        // 分类标签切换功能
        document.querySelectorAll('.category-item').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.category-item').forEach(t => {
                    t.classList.remove('active');
                });
                this.classList.add('active');
                
                // 筛选不同分类的约会
                const category = this.textContent.trim();
                showToast(`已切换到 "${category}" 分类`);
            });
        });
        
        // 点赞功能
        document.querySelectorAll('.stat-item .fa-heart').forEach(icon => {
            icon.parentElement.addEventListener('click', function(e) {
                e.stopPropagation();
                
                const isLiked = this.classList.contains('liked');
                const countEl = this.querySelector('span');
                let count = parseInt(countEl.textContent.replace(/,|\s/g, ''));
                
                if (isLiked) {
                    this.classList.remove('liked');
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    count--;
                } else {
                    this.classList.add('liked');
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    count++;
                }
                
                countEl.textContent = isNaN(count) ? "0 点赞" : count.toLocaleString() + (count === 1 ? " 点赞" : " 点赞");
                showToast(isLiked ? "取消点赞" : "点赞成功");
            });
        });
        
        // 收藏功能
        document.querySelectorAll('.stat-item .fa-bookmark').forEach(icon => {
            icon.parentElement.addEventListener('click', function(e) {
                e.stopPropagation();
                
                const isSaved = this.classList.contains('saved');
                const countEl = this.querySelector('span');
                let count = parseInt(countEl.textContent.replace(/,|\s/g, ''));
                
                if (isSaved) {
                    this.classList.remove('saved');
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    count--;
                } else {
                    this.classList.add('saved');
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    count++;
                }
                
                countEl.textContent = isNaN(count) ? "0 收藏" : count.toLocaleString() + (count === 1 ? " 收藏" : " 收藏");
                showToast(isSaved ? "取消收藏" : "收藏成功");
            });
        });
        
        // 评论按钮点击
        document.querySelectorAll('.stat-item .fa-comment, .action-btn.secondary-action').forEach(btn => {
            btn.closest('.stat-item, .action-btn').addEventListener('click', function(e) {
                e.stopPropagation();
                const title = this.closest('.date-card, .featured-date').querySelector('.date-title').textContent;
                showToast(`查看 "${title}" 的评论`);
            });
        });
        
        // 计划参加按钮点击
        document.querySelectorAll('.action-btn.primary-action').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const title = this.closest('.featured-date').querySelector('.date-title').textContent;
                showToast(`你计划参加 "${title}"，已添加到你的日程`);
            });
        });
        
        // 卡片点击事件
        document.querySelectorAll('.date-card, .featured-date').forEach(card => {
            card.addEventListener('click', function() {
                const title = this.querySelector('.date-title').textContent;
                showToast(`查看约会详情: ${title}`);
                // 实际应用中这里会跳转到详情页
                // window.location.href = 'date-detail.html';
            });
        });
        
        // 加载更多按钮
        document.querySelector('.load-more').addEventListener('click', function() {
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
            
            // 模拟加载延迟
            setTimeout(() => {
                this.innerHTML = '<i class="fas fa-refresh"></i> 发现更多约会灵感';
                showToast('已加载更多约会灵感');
            }, 1500);
        });
        
    </script>
</body>
</html>

